<template>
  <div class="box">
    <el-form size="medium"  ref="itemForm" label-width="100px" :model="item" :rules="itemRules">
      
      <el-form-item label="分类名称" prop="name">
        <el-input placeholder="请输入分类名称" v-model="item.name"></el-input>
      </el-form-item>

      <el-form-item label="状态">
        <el-radio-group v-model="item.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
     
      <el-form-item>
        <el-button type="primary" @click="saveData">保存数据</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
import { 
  addArticleCate,
  editArticleCate
} from '@/api/mall/article';
export default {
  name: 'itemArticle',
  data() {
    return {
      isLoading: false,
      item:{
        name:'',
        status:1
      },
      itemRules:{
        name: [{
          required: true,
          trigger:'blur',
          message: '分类名称必须填写'
        }]
      }
    }
  },
  props: {
    obj:{
      type:Object,
      default:function(){
        return {};
      }
    }
  },
  created(){
    if(this.obj.id){
      this.item = {...this.obj};
      //删除status_text字段
      delete this.item.status_text;
    }else{
      this.item = {
        name:'',
        status:1
      }
    }
  },
  computed: {},
  watch:{},
  methods: {
    //保存数据
    saveData(){
      this.$refs.itemForm.validate(valid => {
        if (valid) {
          this.isLoading = true;
          if(this.item.id){
            //修改
            editArticleCate(this.item).then(res => {
              this.isLoading = false;
              this.$emit('success');
            }).catch(e => {
              this.isLoading = false;
            });
          }else{
            //新增
            addArticleCate(this.item).then(res => {
              this.isLoading = false;
              //this.item = {};
              this.$emit('success');
            }).catch(e => {
              this.isLoading = false;
            });    
          };         
        } else {
          //console.log('error')
          return false
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input {
  width: 270px;
}

.box {
  width: 100%;
  /*padding: 60px;
  height: calc(100vh - 77px);
  overflow: scroll;*/
}
</style>
